<template>
  <view class="cardcontent">
    <view class="item" v-for="item in cardList" :key="item.label">
      <text class="label">{{ item.label }}</text>
      <text class="value">{{ item.value }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "cardlist",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  computed: {
    cardList() {
      let list = [];
      this.list.forEach((item) => {
        list.push({
          label: item.label,
          value: this.data[item.prop],
        });
      });
      return list;
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.cardcontent {
  background: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 0 5rpx rgba($color: #000000, $alpha: 0.2);
  padding: 20rpx 0;
  font-size: 28rpx;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80rpx;
    padding: 0 20rpx;

    .label {
      // flex-shrink: 0;
      // flex-basis: 300rpx;
      flex: 0 0 auto;
      /* 不伸缩、不缩小、基础大小为自身大小 */
      padding-right: 20rpx;
      color: #666;
    }

    .value {
      color: #333;
      line-height: 40rpx;
      white-space: pre-wrap;
      /* 或者 nowrap, pre, pre-line */
      word-break: break-all;
      /* 或者 normal, keep-all */
    }
  }
}
</style>
